@import "./toast";
@import "./toast.ios.vars";

// iOS Toast
// --------------------------------------------------

:host {
  --background: #{$toast-ios-background-color};
  --border-radius: #{$toast-ios-border-radius};
  --button-color: #{$toast-ios-button-color};
  --color: #{$toast-ios-title-color};
  --max-width: #{$toast-max-width};

  font-size: $toast-ios-title-font-size;
}

.toast-wrapper {
  @include position-horizontal(10px, 10px);
  @include margin(auto);

  display: block;
  position: absolute;

  z-index: $z-index-overlay-wrapper;
}

:host(.toast-translucent) .toast-wrapper {
  background: $toast-ios-translucent-background-color;
  backdrop-filter: $toast-ios-translucent-filter;
}

.toast-wrapper.toast-top {
  @include transform(translate3d(0, -100%, 0));

  top: 0;
}

.toast-wrapper.toast-middle {
  opacity: .01;
}

.toast-wrapper.toast-bottom {
  @include transform(translate3d(0, 100%, 0));

  bottom: 0;
}

.toast-message {
  @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
}

.toast-button {
  font-size: $toast-button-font-size;
}